import React,{useState,useEffect,componentDidMount} from 'react'
import './lfr_buy.css'
import { LeftOutline } from 'antd-mobile-icons'
import { useLocation,useNavigate, } from 'react-router-dom'
import axios from 'axios'

export default function Buy() {
    const { state } = useLocation()
    const [num,setnum]=useState(1)
    const [name,setname]=useState('')
    const [phone,setphone]=useState('')
    const [b,setb]=useState('次日06.：00前办理入住')
    const [price,setprice]=useState('')
    const navigate=useNavigate()
    const [isLoading, setIsLoading] = useState(false);
    const [paymentParams, setPaymentParams] = useState({});

    const add=()=>{
        axios.post('http://127.0.0.1:3000/lfr_index/indentadd',{jdname:state.item.name,rddress:state.item.address,fzname:state.items,price:price,da:state.da,db:state.db,num:num,nights:state.nights,name:name,pgone:phone,type:'已取消'}).then(res => {
           console.log(res.data.code);
           handlePayment
          })
    }

  
    useEffect(()=>{
        const fetchPaymentParams = async () => {
            try {
                const response = await axios.get('your_backend_api_url_to_get_payment_params');
                setPaymentParams(response.data);
            } catch (error) {
                console.error('获取支付参数失败', error);
            }
        };
        fetchPaymentParams();
       setprice(state.price*num)
    },[num])
    const handlePayment = () => {
        setIsLoading(true);
        const { appId, timestamp, nonceStr, package: payPackage, signType, paySign } = paymentParams;
        wx.ready(() => {
            wx.chooseWXPay({
                appId,
                timestamp,
                nonceStr,
                package: payPackage,
                signType,
                paySign,
                success: (res) => {
                    console.log('支付成功', res);
                    // 支付成功后的逻辑，如更新订单状态、提示用户等
                    setIsLoading(false);
                },
                fail: (res) => {
                    console.log('支付失败', res);
                    // 支付失败后的逻辑，如提示用户重新支付、显示错误信息等
                    setIsLoading(false);
                }
            });
        });
        wx.error((err) => {
            console.log('微信支付初始化错误', err);
            setIsLoading(false);
        });
    };
    return (
        <div className='buy'>
            <div className='diva'>
                <div className='div1'>
                    <p className='p' onClick={() => { navigate(-1) }}><LeftOutline /></p>
                    <p className='p1'>{state.item.name}</p>
                </div>
                <p>{state.items}|一米八大床|无早餐</p>
                <p>{state.da}入住-{state.db}离店</p>
            </div>
            <div className='divb'>
                <div className='dib1'>
                    <p className='p'>订房信息</p>
                    <p>房间数量 <span className='span'><span className='cz' onClick={()=>{
                      
                        setnum(num-1)
                    }}>-</span>{num}间<span className='cz' onClick={()=>{
                       
                        setnum(num+1)
                    }}>+</span></span></p>
                    <p>住客姓名 <input placeholder='请输入住客姓名' value={name} onChange={(event)=>{setname(event.target.value)}}></input></p>
                    <p>练习手机 <input placeholder='请输入境内手机' value={phone} onChange={(event)=>{setphone(event.target.value)}}></input></p>
                    <p>预计到店 <input placeholder='请输入到店时间' value={b} onChange={(event)=>{setb(event.target.value)}}></input></p>
                </div>
                <div className='dib2'>
                <p className='p'>发票信息</p>
                <ul>
                    <li className='li'>酒店开票.可预约</li>
                    <li>支持普通发票，订单确认一会可电话练习客服预约开票</li>
                </ul>
                </div>
                <div className='dib2'>
                <p className='p'>出行保证</p>
                <ul>
                    <li className='li'>平安无理由取消险</li>
                    <li>可承担取消订单90%的房费损失<span>￥10<input type='radio'></input></span></li>
                </ul>
                </div>
                <div className='dib2'>
                <p className='p'>备注信息</p>
                <ul>
                    <li className='li1'>可输入客人的一些情况和需求</li>
                </ul>
                </div>
                <div className='dib3'>
                <p className='px'>请您在提交订单前仔细阅读《预订条款》</p>
                <p className='px'>为支付绿色环保，需理解并同意电子合同的有效性。如需要签署<br></br>纸质合同，请联系客服</p>
                <p className='px'>交易款项由小默旅行公司统一收取</p>
                </div>
            </div>
            <div className='divc'>
                <p>合计：<span>￥{price}</span></p>
                <button onClick={()=>{
                    add()
                }}>在线支付</button>
            </div>
        </div>
    )
}
